M5Stack の LCD に TFT_eSPI を使って日本語フォント "源真ゴシック" で表示する #M5stack

Watako-Lab さんの M5Stackで好きなフォントを使うを基にフリーの日本語フォント "源真ゴシック" で M5Stack の LCD で日本語表示するところまでをまとめました。

(6/4 更新)

最新の M5Stack ライブラリだと、TFT_eSPI の日本語表示ロジックが取り込まれてて、TFT_eSPI ライブラリを追加インストールしなくても良いみたいですー。
— Nochi (@shikarunochi) 2019年6月4日

ということで調べてみたら取り込まれてた！！
だから M5.Lcd.loadFont() とか使えるようになってるのですねー。

準備

M5Stack 以外で必要なものは以下の通り。

2 GB 以上の micro SD カード

（というか、ファイルサイズ的には 10MB ぐらいですので、その程度のスペースがあれば OK です)

手順

Arduino IDE の M5Stack 開発環境のセットアップ (Windows / macOS) が終わっている前提で以下の作業を行います。

フォントファイル(VLW ファイル)をダウンロードして micro SD カードに保存
※ micro SD カードは FAT でフォーマットしておいてください

実装

#include <M5Stack.h>

void setup() {
  M5.begin();

  M5.Lcd.clear();
  M5.Lcd.fillScreen(BLACK);
  M5.Lcd.setCursor(0, 0);
  M5.Lcd.setTextColor(WHITE);

  String f16 = "genshin-regular-16pt"; // without Ext
  M5.Lcd.loadFont(f16, SD);
  M5.Lcd.printf("16pt: Good-bye 平成\n");
  M5.Lcd.printf("こんにちわ令和\n");
  M5.Lcd.unloadFont();

  String f24 = "genshin-regular-24pt"; // without Ext
  M5.Lcd.loadFont(f24, SD);
  M5.Lcd.printf("24pt: Good-bye 平成\n");
  M5.Lcd.printf("こんにちわ令和\n");
  M5.Lcd.unloadFont();

  String f32 = "genshin-regular-32pt"; // without Ext
  M5.Lcd.loadFont(f32, SD);
  M5.Lcd.printf("32pt: Good-bye 平成\n");
  M5.Lcd.printf("こんにちわ令和\n");
  M5.Lcd.unloadFont();
}

void loop(){
}

解説

TFT_eSPI が `M5.Lcd` に追加するメソッド

(6/4 更新) 冒頭でも書いた通り TFT_eSPI は M5Stack ライブラリに取り込まれているので M5.Lcd で #loadFont() と #unloadFont() が使えるようになっています。

loadFont() の引数は (fontName, fs) です。

fs はフォントファイルの読み込み元デバイスの指定をします。 SD を指定すると SD カードから読み込みます。(その他の方法は知らん)
fontName は fs をルートとしたフォントファイルのパス名を指定します。
fontfile.vlw なら fontfile と、拡張子を除いて指定します。 dir1/dir2/fontfile のようにディレクトリ内のパス指定が可能です。
フォントファイルの読み込みには若干時間がかかります。

unloadFont() は引数指定はありません。

VLW ファイルの作成方法

Watako-Lab さんの「ライブラリ用フォントの作成手順」で解説されていますが、要点は Processing を使って生成するということになります。

ちなみに Processing 以外での VLW ファイル作成は無理っぽいようです、残念。

TFT_eSPI ライブラリの調整は不要です

(6/4 更新) この章は、まるまる削除しました。

VLW 形式フォントファイル配布とライセンス

ダウンロードは以下から可能です。

源真ゴシック Regular VLW 形式フォントファイル
- フォントサイズ 16pt; genshin-regular-16pt.vlw (3.5 MB)
- フォントサイズ 20pt; genshin-regular-20pt.vlw (5.0 MB)
- フォントサイズ 24pt; genshin-regular-24pt.vlw (6.8 MB)
- フォントサイズ 28pt; genshin-regular-28pt.vlw (9.2 MB)
- フォントサイズ 32pt; genshin-regular-32pt.vlw (11.6 MB)

収録文字

Unicode コードポイントの以下の範囲を収録しています。
ザクっというと、ASCII, ひらがな, カタカナ(半角含む), 漢字が入ってます。

ライセンス

http://jikasei.me/info/license.html に従い、VLW ファイルの公開と共にライセンス明記しておきます。

本ソフトでは表示フォントに「源真ゴシック」(http://jikasei.me/font/genshin/) を使用しています。
Licensed under SIL Open Font License 1.1 (http://scripts.sil.org/OFL)
© 2015 自家製フォント工房, © 2014, 2015 Adobe Systems Incorporated, © 2015 M+FONTS PROJECT

まとめ

VLW ファイルの作成が面倒ですね。
ライセンス的に NG だったらすぐ言ってください。（読解力に不安あり）

アンチエイリアスが効いていない気がするが、読めるので気にしないことにする。

EoT

M5Stack の LCD に TFT_eSPI を使って日本語フォント "源真ゴシック" で表示する